<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>聊天室</title>
    <script src="assets/sock/sockjs.min.js" type="text/javascript"></script>
    <script src="assets/sock/stomp.js" type="text/javascript"></script>
    <script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<p>聊天室</p>
<form id="sangForm">
    <textarea rows="4" cols="60" name="text"></textarea>
    <input type="submit" value="发送"/>
</form>
<script th:inline="javascript">
    $("#sangForm").submit(function (e) {
        e.preventDefault();
        var textArea = $("#sangForm").find('textarea[name="text"]');
        var text = textArea.val();
        send(text)
        textArea.val('');
    });
    var socket = new SockJS('/ws');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function(frame) {
        // 注册发送消息
        stompClient.subscribe('/topic/send', function(msg) {
            console.log(msg.body);
        });
        // 注册推送时间回调
        stompClient.subscribe('/topic/callback', function(r) {
            console.log(r.body)
        });
    });

    function send(text) {
        stompClient.send("/app/send", {}, JSON.stringify({
            'message' : text
        }));
    }
</script>
<div id="output"></div>
</body>
</html>